<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
function editable(sample) {
  return `<div contenteditable>${sample}</div>`;
}

function testIt(command_name, input, expected, description) {
  selection_test(
    editable(input),
    command_name,
    editable(expected),
    description);
}

// bold
testIt('bold',
       '<b><div>^abc|</div> xyz</b>',
       '<div style>^abc|</div><b> xyz</b>',
       'bold-1 first wrod');
testIt('bold',
       '<b><div>^abc|</div>xyz</b>',
       '<div style>^abc|</div><b>xyz</b>',
       'bold-2 first word');
testIt('bold',
       '<b><div>^abc|</div><em>xyz</em></b>',
       '<div style>^abc|</div><em style="font-weight: bold;">xyz</em>',
       'bold-3 first word');
testIt('bold',
       '<b>abc <div>^xyz|</div></b>',
       '<b>abc </b><div style>^xyz|</div>',
       'bold-4 second word');
testIt('bold',
       '<b><em>abc</em> <div>^xyz|</div></b>',
       '<em style="font-weight: bold;">abc</em> <div style>^xyz|</div>',
       'bold-5 second word');
testIt('bold',
       '^<b> <div>abc</div> </b>|',
       ' <div style>^abc|</div> ',
       'bold-6 all');
testIt('bold',
       '^<b><strike><div>abc</div></strike></b>|',
       '<strike style><div style>^abc|</div></strike>',
       'bold-7 all');
testIt('bold',
       '<b><div>^abc|</div><div>xyz</div></b>',
       '<div style>^abc|</div><div style="font-weight: bold;">xyz</div>',
       'bold-8 first word');
testIt('bold',
       '<b><div>^abc|</div><div style="font-weight: normal;">xyz</div>webkit</b>',
       '<div style>^abc|</div><div style="font-weight: normal;">xyz</div><b>webkit</b>',
       'bold-9 first word');
testIt('bold',
       '<b style="font-style: italic;">abc ^xyz|</b>',
       '<b style="font-style: italic;">abc </b><span style="font-style: italic;">^xyz|</span>',
       'bold-10 second word');

// underline
testIt('underline',
       '<u>abc <b>^xyz|</b> wxy</u>',
       '<u>abc </u><b style>^xyz|</b><u> wxy</u>',
       'underline-1 second word');
testIt('underline',
        '<u>abc <b>^xyz</b> wxy|</u>',
        '<u>abc </u><b style>^xyz</b> wxy|',
        'underline-2 last two words');
testIt('underline',
       '<u>abc <b>^xyz wxy|</b></u>',
       '<u>abc </u><b style>^xyz wxy|</b>',
       'underline-3 last two words');
testIt('underline',
       '<u>abc <b>^xyz| wxy</b></u>',
       '<u>abc </u><b style>^xyz|<u> wxy</u></b>',
       'underline-4 second word');
testIt('underline',
       '<u><b>abc ^xyz|</b> wxy</u>',
       '<b style><u>abc </u>^xyz|</b><u> wxy</u>',
       'underline-5 second word');
testIt('underline',
        '<u><strike>abc ^xyz|</strike></u>',
        '<strike style><u>abc </u>^xyz|</strike>',
        'underline-6 second word');
testIt('underline',
       '<u><strike>abc ^xyz| wxy</strike></u>',
       '<strike style><u>abc </u>^xyz|<u> wxy</u></strike>',
       'underline-7 second word');
testIt('underline',
       '<u><strike>abc ^xyz|</strike> wxy</u>',
       '<strike style><u>abc </u>^xyz|</strike><u> wxy</u>',
       'underline-8 second word');
testIt('underline',
       '<u>abc <em><code>^xyz| wxy</code></em> rocks</u>',
       '<u>abc </u><em style><code style>^xyz|<u> wxy</u></code></em><u> rocks</u>',
       'underline-9 second word');

// strikeThrough
testIt('strikeThrough',
      '^<s style="color: blue;">abc xyz</strike>|',
      '<span style="color: blue;">^abc xyz|</span>',
      'strike-through-1 all');
testIt('strikeThrough',
      '<s style="color: blue;"><div>^abc|</div> <b>xyz</b> webkit</strike>',
      '<span style="color: blue;"><div style>^abc|</div> <b style="text-decoration-line: line-through;">xyz</b><strike> webkit</strike></span>',
      'strike-through-2 first word');
</script>
